<template lang="html">
  <div class="">
      <el-table :data="tableData.list" style="width: 100%">
          <el-table-column prop="name" align="center" label="供应商姓名" width="120">
            <template slot-scope="scope">
                <el-popover placement="right" @show="clickDetail(scope.row)" trigger="hover">
                  <div style="line-height:25px;" v-loading="!detailData.head_pic">
                      <p><img class="head_pic" :src="detailData.head_pic" alt=""></p>
                      <p>姓名：{{detailData.name}}</p>
                      <p>开户名：{{detailData.bank_name}}</p>
                      <p>开户行：{{detailData.bank}}</p>
                      <p>分行：{{detailData.bank_branch}}</p>
                      <p>卡号：{{detailData.account}}</p>
                  </div>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="phone" align="center" label="电话" width="180"></el-table-column>
          <el-table-column align="center" label="服务类型">
            <template slot-scope="scope">
                <el-button type="primary" @click="clickType(scope.row)" slot="reference" size="mini" plain>查看理由</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="city" label="地区"></el-table-column>
          <el-table-column align="center" prop="create_time" label="时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">通过</el-button>
              <el-button @click="reject(scope.row)" type="text" size="small">驳回</el-button>
            </template>
          </el-table-column>
      </el-table>
      <div class="">
        <el-pagination layout="prev, pager, next" :page-count="tableData.rows" :total="tableData.rows" align="center"></el-pagination>
      </div>

      <el-dialog title="驳回理由" :visible.sync="centerDialogVisible" width="30%" center>
         <el-input slot="" type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
         <span slot="footer" class="dialog-footer">
             <el-button @click="centerDialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="rejectConfirm">确 定</el-button>
         </span>
      </el-dialog>

      <el-dialog title="通过" :visible.sync="dialogVisible" width="31%" center>
         <div class="el_form">
          <el-transfer :titles="['全部设备','已选设备']" :button-texts="['移除', '添加']" v-model="currentValue" :data="checkDatas"></el-transfer>
         </div>
         <div class="select" v-if="ifMinimum">
             <p>
               <span style="line-height: 30px;">设置最低结算额：</span>
               <el-input placeholder="请输入最低结算额" v-model="minimum" type="text"></el-input>
             </p>
         </div>
         <div class="select" style="text-align: center;">
             <p>是否可查看保单信息</p>
             <el-radio v-model="radio" label="1">是</el-radio>
             <el-radio v-model="radio" label="0">否</el-radio>
         </div>
         <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="insertDialog">确 定</el-button>
         </span>
      </el-dialog>


      <el-dialog title="服务类型详情" :visible.sync="dialogVisible1">
        <p>邦保盒子</p>
        <el-table :data="[gridData]">
          <el-table-column label="支付凭证">
              <template slot-scope="scope">
                 <div class="el-table_img">
                   <img :preview="scope.row.obd" class="preview-img" :src="scope.row.obd" alt="">
                 </div>
              </template>
          </el-table-column>

        </el-table>

        <p>养护品</p>
        <el-table :data="gridData.free">
            <el-table-column property="brand" label="品牌"></el-table-column>
            <el-table-column property="" label="型号">
                <template slot-scope="scope1">
                    <p v-for="item in scope1.row.detail">{{item.standard}}</p>
                </template>
            </el-table-column>
            <el-table-column property="" label="结算价">
              <template slot-scope="scope1">
                  <p v-for="item in scope1.row.detail">{{item.price}}</p>
              </template>
            </el-table-column>
            <el-table-column label="产品图片">
              <template slot-scope="scope1">
                 <div class="el-table_img">
                    <img preview="0" class="preview-img" :src="scope1.row.pic" alt="">
                 </div>
              </template>
            </el-table-column>
            <el-table-column label="质量保证">
              <template slot-scope="scope1">
                 <div class="el-table_img">
                    <img preview="0" class="preview-img" :src="scope1.row.quality_certificate" alt="">
                 </div>
              </template>
            </el-table-column>
            <el-table-column label="质量报告">
              <template slot-scope="scope1">
                 <div class="el-table_img">
                    <img preview="0" class="preview-img" :src="scope1.row.quality_inspection_report" alt="">
                 </div>
              </template>
            </el-table-column>
            <el-table-column label="质量承保">
              <template slot-scope="scope1">
                 <div class="el-table_img">
                    <img preview="0" class="preview-img" :src="scope1.row.quality_undertaking" alt="">
                 </div>
              </template>
            </el-table-column>
            <el-table-column width="" property="name" label="产品描述"></el-table-column>
        </el-table>
      </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      token:this.$store.state.user.token3,
      tableData: [],
      detailData:[],
      gridData:[],
      textarea:'',
      currentRow:null,
      currentValue:[],
      checkDatas:[],
      radio:'1',
      number:[],
      ifMinimum:false,
      minimum:0,
      dialogVisible:false,
      dialogVisible1:false,
      centerDialogVisible:false
    }
  },
  created(){
    this.smAddAreaList()

  },
  methods:{
    smAddAreaList(page = 1){
      this.$http2.smAddAreaList({
        page: page
      }).then(res=>{
        if(res.data.code == 1){
          this.tableData =res.data.data
        }else{
          this.tableData = []
        }
      })
    },
    // 通过
    handleClick(e){
      this.dialogVisible = true;
      this.currentRow = e;
      this.$http2.getEqInfo()
      .then(res=>{
        this.checkDatas = []
        for(var i=0;i<res.data.data.length;i++){
            this.checkDatas.push({
              key:i,
              label:res.data.data[i]
            })
        }
      })
      this.$http2.getSmMinMoney({
        sm_id: this.currentRow.sm_id,
        token: this.token
      }).then(res=>{
        if(res.data.code == 1){
          this.ifMinimum = true
          this.minimum = res.data.data
        }else{
          this.ifMinimum = false
          this.minimum = 0
        }
      })
    },
    // / 通过操作
    insertDialog(){
        if(this.currentValue.length==0){
          this.$message.error("请选择设备号");
          return false;
        }
        for(var i=0;i<this.currentValue.length;i++){
            this.number.push(this.checkDatas[this.currentValue[i]].label)
        }
        this.$http2.passArea({
          id: this.currentRow.id,
          eq_num:this.number,
          token: this.token,
          min_money: this.minimum,
          if_policy:this.radio
        })
        .then(res=>{
          if(res.data.code == 1){
            this.$message.success(res.data.msg)
            this.dialogVisible = false;
            this.smAddAreaList()
          }else{
            this.$message.error(res.data.msg)
          }
        })
    },
    // 驳回
    reject(e){
        this.currentRow = e;
        this.centerDialogVisible = true
    },
    // 驳回操作
    rejectConfirm(){
        if(!this.textarea){
          this.$message.error("请填写驳回理由");
          return false;
        }
        this.$http2.rejectArea({
          reason: this.textarea,
          id: this.currentRow.id
        }).then(res=>{
          if(res.data.code == 1){
            this.$message.success(res.data.msg)
          }else{
            this.$message.error(res.data.msg)
          }
        })
    },
    clickDetail(e){
      this.detailData = []
      this.$http2.getSmUserDetail({
        sm_id:e.sm_id
      }).then(res=>{
        this.detailData = res.data.data
      })
    },
    clickType(e){
      this.dialogVisible1 = true;
      this.gridData = []
      this.$http2.getSmAreaType({
          id: e.id
      }).then(res=>{
        this.gridData = res.data.data
        this.$previewRefresh();
      })
    },
    changePage(e){
      this.smAddAreaList(e)
    },


  }
}
</script>

<style lang="css" scoped>

.head_pic{
  width:50px;
  height:50px;
  display: block
}
.preview-img{
    display: block;
    width: 100%;
    height: 30px;
}
</style>
